/* eslint react/prefer-stateless-function:0, react/prop-types:0 */

import React, { Component } from 'react';
import { Link } from 'react-router';
import Menu, { Item as MenuItem, SubMenu } from 'rc-menu';
import styles from './style.css';

export default class extends Component {

  static propTypes = {};

  static defaultProps = {
    list: [],
  };

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Menu
        className={styles.menu}
        onSelect={f => f}
        onClick={f=>f}
        onOpenChange={f => f}
        mode="horizontal"
        openAnimation="slide-up"
        // defaultOpenKeys={['menu-0']}
      >
        {
          this.props.list.map((item, index) => {
            if (!item.subMenu || item.subMenu && item.subMenu.length === 0) {
              return (
                <MenuItem className={styles.subMenu} key={`menu-${index}`}>
                  <Link to={`/category?cid=${item.id}`} className={styles.menuLink}>{item.name}</Link>
                </MenuItem>
              );
            }
            return (
              <SubMenu title={<Link className={styles.menuLink} to={`/category?cid=${item.id}`}>{item.name}</Link>} key={`menu-${index}`}>
                {
                  item.subMenu.map((sub, subIndex) =>
                    <MenuItem key={`submenu-${subIndex}`}>
                      <Link className={styles.menuLink} to={`/category?cid=${sub.id}`}>{sub.name}</Link>
                    </MenuItem>
                  )
                }
              </SubMenu>
            );
          })
        }
      </Menu>
    );
  }
}
